<template>
  <div class="dianx">
        <header>
      <p style v-on:click="goback()">← 新增缴费账户</p>
      <p style="position: absolute">北京市</p>
    </header>
    <div class="navx">
      <span class="iconfont icon-ranqifei"></span
      ><span class="nav-dian">燃气费</span>
    </div>

    <div class="jiaofei2">
      <span class="jaiodian-1">缴费单位</span>
      <span class="jaiodian-2">北京市燃气集团</span>
      <van-cell-group class="dian-cell">
        <van-field
          v-model="value"
          label="客户编号"
          placeholder="请输入用客户编号"
        />
      
      </van-cell-group>
    </div>

    <span class="zihu">同意《宜居自助缴费协议》</span>

    <button class="btn">下一步</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
    };
  },
   methods: {
    goback() {
      this.$router.replace({ name: "more" });
    },
  },
};
</script>

<style lang="less" scoped>
.dianx {
  width: 100%;
  height: 100%;
  background-color: #ebebeb;
  header {
    padding-left: 20px;
    height: 125px;
    background-color: rgb(255, 86, 84);
    position: relative;
    p {
      margin: 0px;
      &:nth-child(1) {
        font-size: 40px;
        color: #fff;
        line-height: 125px;
      }
      &:nth-child(2) {
        right: 20px;
        bottom: 40px;
        font-size: 30px;
        color: #fff;
      }
    }
  }
  .navx {
    background-color: #fff;
    height: 90px;
    .icon-ranqifei {
      display: inline-block;
      font-size: 45px;
      color: #d81e06;
      padding: 23px;
      vertical-align: middle;
    }

    .nav-dian {
      display: inline-block;
      font-size: 30px;
      color: #000000;
    }
  }

  .jiaofei2 {
    margin-top: 34px;
    background-color: #fff;
    border-radius: 10px;
    margin: 20px;
    .jaiodian-1 {
      display: inline-block;
      font-size: 30px;
      color: #000000;
      margin: 25px;
    }
    .jaiodian-2 {
      display: inline-block;
      font-size: 26px;
      color: #000000;
      margin-left:150px;
    }
  }
  .zihu {
     display: inline-block; 
     margin: 40px;
     font-size: 26px;
  }
   .btn {
    background-color: #ff5654;
    border: 1px solid #ff5654;
    width: 620px;
    text-align: center;
    height: 60px;
    border-radius: 10px;
    margin: 40px 0 0 40px;
    color: #fff;
    font-size: 36px;
    margin-left: 60px;
  }
}
</style>

